import logo from "./logo.svg";
import "./App.css";

function MyButton() {
  return <button>Click me!</button>;
}
function App() {
  const products = [
    { title: "Cabbage", id: 1 },
    { title: "Garlic", id: 2 },
    { title: "Apple", id: 3 },
  ];

  const listItems = products.map(product => (
    <li key={product.id}>{product.title}</li>
  ));

  // const handleClick = () => {
  //   console.log("Button clicked");
  // };

  function handleClick() {
    console.log("1222");
  }
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <hr />

        <h1>Welcome to my app</h1>
        <ul>{listItems}</ul>
        <ul>
          {products.map(item => (
            <li key={item.id}>
              {item.id}:{item.title}
            </li>
          ))}
        </ul>
        <h2>响应事件</h2>
        <button onClick={handleClick}>click me</button>
      </header>
    </div>
  );
}

export default App;
